<template>
	<view>
		<uni-nav-bar height="88rpx" fixed statusBar left-icon="left" title="搜索" :border="false" @clickLeft="$back()">
		</uni-nav-bar>
		<view class="container">
			<view class="search-wrapper">
				<view class="search-input">
					<view class="search-input-wrapper">
						<view class="left">
							<!-- <text class="search-icon iconfont icon-search"></text> -->
							<uni-icons type="search" size="32rpx"></uni-icons>
							<!-- <text class="iconfont uicon-trash"></text> -->
						</view>
						<view class="right">
							<input v-model="searchValue" class="input" focus="true" placeholder="请输入关键字"
								type="text"></input>
						</view>
					</view>
				</view>
				<view class="search-button">
					<view class="button" @click="onSearch">搜索</view>
				</view>
			</view>
			<!-- <view class="history" v-if="historySearch.length">
				<view class="his-head">
					<text class="title">最近搜索</text>
					<uni-icons type="trash" @click="openClearHis"></uni-icons>
				</view>
				<view class="his-list">
					<view class="his-item" v-for="(val, index) in historySearch" :key="index">
						<view class="history-button" @click="handleQuick(val)">{{ val }}</view>
					</view>
				</view>
			</view> -->
		</view>
		<u-modal :show="modalShow" :title="modalOptions.title" :confirmText="modalOptions.onfirmText"
			:cancelText="modalOptions.cancelText" :cancelColor="modalOptions.cancelColor" showCancelButton
			:confirmColor="modalOptions.confirmColor" @confirm="modalconfirm" @cancel="closeDialog"
			@close="closeDialog">
			<view class="Modal-slot-content">
				<view>{{modalOptions.content}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const HISTORY_SEARCH = 'historySearch'
	const modalOptions = {
		content: '',
		title: '注意',
		onfirmText: '确认',
		confirmColor: '#f34615',
		cancelText: '取消'
	}
	export default {
		data() {
			return {
				//模态框
				modalShow: false,
				//模态框确认方法
				callback: null,
				//当前模态框名字
				now_modalShow: '',
				//模态框配置
				modalOptions: {
					content: '',
					title: '注意',
					onfirmText: '确认',
					confirmColor: '#1977E1',
					cancelText: '取消'
				},
				historySearch: [],
				searchValue: '',
				searchStyle: {
					coloe: 'red'
				},
				searchType: '',
				searchPageValue: '',
				searchKey: ''
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 获取历史搜索
			this.historySearch = this.getHistorySearch()
			this.searchType = options.searchType
			this.searchKey = options.searchKey
			this.searchPageValue = options.searchValue
		},

		methods: {
			//打开弹窗
			openDialog(openShow = 'modal') {
				this.now_modalShow = openShow
				this[openShow + 'Show'] = true
			},
			//关闭弹窗
			closeDialog() {
				this[this.now_modalShow + 'Show'] = false
				this.callback = null
				//this.modalOptions = { ...modalOptions }
			},
			//弹窗确认触发
			modalconfirm() {
				// if (this.callback !== null) {
				// 	this.callback()
				// }
				this.clearSearch()
			},
			/**
			 * 获取历史搜索
			 */
			getHistorySearch() {
				return uni.getStorageSync(HISTORY_SEARCH) || []
			},
			openClearHis() {
				const that = this
				that.modalOptions.content = '是否清空搜索记录？'
				that.callBack = that.clearSearch
				that.openDialog()
			},
			/**
			 * 搜索提交
			 */
			onSearch() {
				const {
					searchValue
				} = this
				console.log(1);
				const searchKey = this.searchKey
				const searchUrl = uni.getStorageSync(this.searchType)
				let searchValueObj = uni.getStorageSync(this.searchPageValue) ? JSON.parse(uni.getStorageSync(this
					.searchPageValue)) : {}
				searchValueObj[searchKey] = searchValue
				const new_searchValueObj = JSON.stringify(searchValueObj)
				if (searchValue) {
					// 记录历史搜索
					this.setHistory(searchValue)
					uni.setStorageSync(this.searchPageValue, new_searchValueObj)
					this.$navTo(`${ searchUrl}`)
				} else {
					uni.setStorageSync(this.searchPageValue, new_searchValueObj)
					this.$navTo(`${searchUrl}`)
				}
			},

			/**
			 * 记录历史搜索
			 */
			setHistory(searchValue) {
				const data = this.getHistorySearch()
				const index = data.indexOf(searchValue)
				if (index > -1) {
					data.splice(index, 1)
				}
				data.unshift(searchValue)
				this.historySearch = data
				this.onUpdateStorage()
			},

			/**
			 * 清空最近搜索记录
			 */
			clearSearch() {
				this.historySearch = []
				this.onUpdateStorage()
				this.closeDialog()
			},

			/**
			 * 更新历史搜索缓存
			 * @param {Object} data
			 */
			onUpdateStorage(data) {
				uni.setStorageSync(HISTORY_SEARCH, this.historySearch)
			},

			/**
			 * 跳转到最近搜索
			 */
			handleQuick(search) {
				uni.setStorageSync('goods_search_value', search)
				this.$navTo('pages/goods/goodsList/goodsList')
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "./searchView.scss";
</style>